<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点透问题</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }
        #A{ /*灰色色半透明遮盖层A*/
            width: 300px;
            height: 300px;
            background-color: rgba(255,0,0,0.25);       
        }
        #B{ /*黄色内容层B*/
            width: 240px;
            height: 240px;
            background-color: yellow;
            position: absolute;
            left: 30px;
            top: 30px;
            z-index: -1;
        }
        #console{ /*绿色状态输出框*/
            border: 1px solid green;
            position: absolute;
            top: 300px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="A"></div>
    <div id="B">
       <a href="https://www.cnblogs.com/shizk/">https://www.cnblogs.com/shizk/</a>
    </div>
    <div id="console"></div>
	
	<script type="text/javascript">
		var div1 = document.getElementById("A");
		var div2 = document.getElementById('B');
		var con = document.getElementById('console');
		function handle(e){
		    var tar = e.target, eve = e.type;
		   var ele = document.createElement("p");
		   ele.innerHTML = "target:"+ tar.id + " event:" + eve ;
		   con.appendChild(ele);
		   if(tar.id === "div1"){
		       div1.style.display = "none";
		   }
		}
		// div1.onclick = handle()
		div2.addEventListener("touchstart",handle);
		// div1.addEventListener("touchstart",handle);
	</script>
</body>
</html>